import { Breadcrumb } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link, RouteChildrenProps } from 'react-router-dom';
import { RouteComponentPropsPlus, RouterConfig } from '../../util/routerBase';

interface BreadcrumbItem {
	path: string;
	breadcrumbName: string;
	meta: Record<string, any> | undefined;
}

const handleMergeMatch = (str: string, params: Record<string, any>): string => {
	if (!str) return '';
	let res = str;
	const strMatch = str.match(/:[a-zA-Z0-9_-]*/gi);

	if (strMatch && strMatch.length) {
		for (let i = 0; i < strMatch.length; i++) {
			const item = strMatch[i];
			const itemSub = item.substr(1);
			const value = params[itemSub];
			if (value !== undefined) {
				res = res.replace(item, value);
			}
		}
	}

	return res;
};

const handlePathConfig = (routes: RouterConfig[], currentRoute: RouteComponentPropsPlus): BreadcrumbItem[] => {
	if (!currentRoute) return [];
	const currentPath = currentRoute.match.path;
	const currentParams: Record<string, any> = currentRoute.match.params;

	const res: BreadcrumbItem[] = [];

	const dfs = (routes: RouterConfig[]): boolean => {
		for (let i = 0; i < routes.length; i++) {
			const item = routes[i];
			const { path, breadcrumbName, meta } = item;
			res.push({
				path,
				breadcrumbName,
				meta,
			});
			if (item.children) {
				const flag = dfs(item.children);
				if (!flag) {
					return false;
				}
			}
			if (item.path === currentPath) {
				return false;
			}
			res.pop();
		}
		return true;
	};

	dfs(routes);

	return res
		.map((item) => ({
			path: handleMergeMatch(item.path, currentParams),
			breadcrumbName: handleMergeMatch(item.breadcrumbName, currentParams),
			meta: item.meta,
		}))
		.filter((item) => item.path !== '/' && item.breadcrumbName);
};

function BreadcrumbPlus(props: {
	routes: RouterConfig[];
	currentRoute?: RouteComponentPropsPlus;
	homeConfig?: BreadcrumbItem;
	routerInfo?: RouteComponentPropsPlus;
}): JSX.Element {
	const [pathsConfig, setPathsConfig] = useState<BreadcrumbItem[]>([]);
	useEffect(() => {
		if (props.routerInfo) {
			setPathsConfig(handlePathConfig(props.routes, props.routerInfo));
		}
	}, [props.currentRoute, props.routes, props]);

	const BreadcrumbConfig = [
		props.homeConfig ? props.homeConfig : { path: '/', breadcrumbName: '首页', meta: undefined },
		...pathsConfig,
	];
	return (
		<Breadcrumb>
			{BreadcrumbConfig.map((item, index) => {
				if (index + 1 === BreadcrumbConfig.length) {
					return <Breadcrumb.Item key={index}>{item.breadcrumbName}</Breadcrumb.Item>;
				}
				if (item.meta && item.meta.disableBreadcrumb) {
					return <Breadcrumb.Item key={index}>{item.breadcrumbName}</Breadcrumb.Item>;
				}
				return (
					<Breadcrumb.Item key={index}>
						<Link to={item.path}>{item.breadcrumbName}</Link>
					</Breadcrumb.Item>
				);
			})}
		</Breadcrumb>
	);
}

const mapStateToProps = (state: { routerInfo: RouteComponentPropsPlus }) => {
	return {
		routerInfo: state.routerInfo,
	};
};

export default connect(mapStateToProps)(BreadcrumbPlus);
